import React, { Component } from 'react';
import { NavBar, TabBar, Button } from 'antd-mobile'
import { connect } from 'react-redux'
import { TabBarItem } from 'antd-mobile/es/components/tab-bar/tab-bar';
import { ADD_CAR_ITEM } from '../../store/reducer'
class Index extends Component {
	handleAdd = () => {
		this.props.dispatch({ type: ADD_CAR_ITEM, payload: this.props.location.state })
	}
	render() {
		const { location } = this.props
		const { state } = location
		return (
			<div>
				<NavBar onBack={() => this.props.history.goBack()}>详情</NavBar>
				<img src={state.url} alt="" width="100%" />
				<h3>{state.title}</h3>
				<p>{state.desc}</p>
				<p>{state.price}</p>

				<Button block color='primary' size='large'
					onClick={ this.handleAdd  }
				>
					加入购物车
				</Button>
			</div>
		);
	}
}

export default connect(state => state, dispatch => ({ dispatch }))(Index);
